<template><div class="wrapper">
  <div class="content">
    <div class="hot">
      <dl>
        <dt class="hot-city">热门城市</dt>
        <dd class="hot-citys">
          <ul class="list">
            <li class="list-item" @click="gohome(item.name)" v-for="item in hotCities" :key="item.id">{{ item.name }}</li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="sort">
      <dl>
        <dt class="sort-city">字母排序</dt>
        <dd class="sort-citys">
          <ul class="list clearfix">
            <li class="list-item" @click="locationto(key)" v-for="(val,key) in cities">{{ key }}</li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="list">
      <dl v-for="(val,key) in cities">
        <dt class="list-city" :ref="key">{{ key }}</dt>
        <dd class="list-citys">
          <ul class="list clearfix">
            <li class="list-item" @click="gohome(item.name)" v-for="item in val" :key="item.id">{{ item.name }}</li>
          </ul>
        </dd>
      </dl>
    </div>
  </div>
</div>
</template>

<script>
  import BScroll from "better-scroll"
  import { mapMutations } from "vuex"
  export default {
    props:["cities","hotCities"],
    data(){
      return{
        scroll:""
      }
    },
    methods:{
      locationto(k){
        this.scroll.scrollToElement(this.$refs[k][0],1000)
      },
      gohome(cityName){
        this.changeCity(cityName);
        this.$router.push("/");
      },
      ...mapMutations(["changeCity"])
    },
    mounted(){
      const wrapper = document.querySelector('.wrapper');
      if(!this.scroll){
        this.scroll = new BScroll(wrapper,{
          click:true
        });
      }else{
        this.scroll.refresh();
      }
    }
  }
</script>

<style scoped lang="stylus">
  .wrapper
    background: #f5f5f5
    position: absolute
    top: .88rem
    left: 0
    right: 0
    bottom: 0
    overflow: hidden
  .sort
    font-size: .28rem
    color: #212121
    .sort-city
      font-size: .24rem
      padding: .24rem .3rem
    .sort-citys
      .list
        background: #ffffff
        .list-item
          float: left
          line-height: .9rem
          height: .9rem
          width: 16.6667%
          text-align: center
  .hot
    font-size: .28rem
    color: #212121
    .hot-city
      font-size: .24rem
      padding: .24rem .3rem
    .hot-citys
      .list
        background: #ffffff
        position: relative
        overflow: hidden
        .list-item
          position: relative
          border-bottom: .02rem solid #ddd
          float: left
          line-height: .9rem
          height: .9rem
          width: 33.333%
          text-align: center
      .list:before
        content:""
        width: 33.3333%
        height: 100%
        left:33%
        border-right: 1px solid #ddd
        border-left: 1px solid #ddd
        position: absolute
  .list
    font-size: .28rem
    color: #212121
    .list-city
      font-size: .24rem
      padding: .24rem .3rem
    .list-citys
      .list
        background: #ffffff
        position: relative
        overflow: hidden
        .list-item
          position: relative
          border-bottom: .02rem solid #ddd
          float: left
          line-height: .9rem
          height: .9rem
          width: 25%
          text-align: center
      .list:before
        content:""
        width: 25%
        height: 100%
        left:25%
        border-right: 1px solid #ddd
        border-left: 1px solid #ddd
        position: absolute
      .list:after
        content:""
        width: 0
        height: 100%
        left:75%
        border-left: 1px solid #ddd
        position: absolute
</style>
